<!-- 12.7 钻石页面 -->
<template>
	<view>
		<view class="page-width">
			<app-search-for :value="value" :mall_id="mall_id" @tosearch="tosearch"></app-search-for>
		</view>
		<!-- 分类视频 -->
		<!-- <view class="gold-video" v-if="detail.advert_params && detail.advert_params.video_url != ''">
			<video autoplay loop muted :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
				:enable-progress-gesture="false" class="video" :src="detail.advert_params.video_url"
				:controls="false"></video>
		</view> -->
		<view class="gold-video" v-if="live_src!=''" @click="jump(live_url)">
			<image class="image" :src="live_src" mode="widthFix"></image>
		</view>
		<!-- 钻石查询 -->
		<view class="beseparate" v-if="twoquery">
			<app-jump-button class="besebutton" v-for="(item,index) in twoquery" :key="index" form :url="item.url">
				<view class="besepone">
					<image :lazy-load="true" class="image" :src="item.icon_url" mode=""></image>
				</view>
			</app-jump-button>
		</view>
		<!-- 分类 3*2 -->
		<view class="cate-style cross-center dir-left-wrap">
			<view class="cate-style-item" v-for="(item,index) in cat_list" :key="index"
				@click="morelist(item.id,item.name,index)">
				<image class="cate-image" :src="item.pic_url" mode=""></image>
				<view class="cate-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="" v-if="cat_list.length > 0">
			<view v-for="(item,index) in cat_list" :key="index">
				<view class="cate-title" v-if="item.childgoodlist.length > 0">
					<text>{{item.name}}</text>
				</view>
				<view class="list-one" v-if="index % 2 == 0">
					<view class="list-one-item" v-for="(child,childindex) in item.childgoodlist" :key="childindex"
						@click="routeGo(child,item.id)">
						<image class="image" :src="child.cover_pic" mode=""></image>
						<text class="u-line-2">{{child.name}}</text>
					</view>
				</view>
				<view class="list-two" v-else>
					<view class="list-two-item" v-for="(child,childindex) in item.childgoodlist" :key="childindex"
						@click="routeGo(child,item.id)">
						<image class="image" :src="child.cover_pic" mode=""></image>
						<text class="list-two-title u-line-5">{{child.name}}</text>
					</view>
				</view>
				<view class="nowmoew" @click="morelist(item.id,item.name,index)" v-if="item.childgoodlist.length>0">
					查看更多>>>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="cate-title">
				<text>{{detail.name}}</text>
			</view>
			<view class="list-three">
				<view class="list-three-item" v-for="(item,index) in goods_list" :key="index">
					<view class="list-one-item" @click="routeGo(item,item.id)">
						<image class="image" :src="item.cover_pic" mode=""></image>
						<text class="u-line-2">{{item.name}}</text>
					</view>

					<view class="beseparate" v-if="twoquery && (index + 1) % 4 == 0">
						<app-jump-button class="besebutton" v-for="(items,indexa) in twoquery" :key="indexa" form
							:url="items.url">
							<view class="besepone">
								<image :lazy-load="true" class="image" :src="items.icon_url" mode=""></image>
							</view>
						</app-jump-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	const base64 = require('../../utils/base64.js');
	let mallurl = null

	export default {
		components: {
			appSearchFor
		},
		data() {
			return {
				cat_list: [],
				twoquery: [],
				mall_id: 2,
				page: 1,
				page_count: 1,
				cat_id: 0,
				goods_list: [],
				detail: '',
				title: '',
				value: {
					background: `#F7F7F7`,
					color: '#FFFFFF',
					placeholder: '搜索',
					radius: 15,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				live_url: '',
				live_src: ''
			}
		},
		onLoad(options) {
			this.mall_id = 2
			mallurl = this.$siteInfo.apiroot + '?_mall_id=' + this.mall_id + '&r='
			this.cat_id = options.cat_id || 0
			this.allReq(65)
			this.requestCats(this.cat_id) // 1315
			if (this.cat_id > 0) {
				this.loadCatDetail(this.cat_id)
			}
			if (options.title) {
				this.title = options.title
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
		},
		onReachBottom() {
			if (this.cat_list.length == 0 && this.page < this.page_count) {
				this.page++
				this.request()
			}
		},
		methods: {
			itema(index) {
				this.itemindex = index
			},
			tosearch() {
				uni.navigateTo({
					url: '/plugins/diamonds/search'
				})
			},
			loadCatDetail(cat_id) {
				let url = this.$api.default.cat_detail
				if (this.mall_id == 1) {
					url = this.$api.default.cat_detail
				} else {
					// url = this.storemall.default.cat_detail
					url = mallurl + this.$apiUrl.default.cat_detail
				}
				this.$request({
					url: url,
					data: {
						cat_id: cat_id
					},
				}).then(res => {
					this.detail = res.data.detail
					this.title = res.data.detail.name
					if (res.data.detail.params && res.data.detail.params.live_url) {
						this.live_url = res.data.detail.params.live_url
					}
					if (this.live_url != '') {
						this.checkPlink(this.live_url)
					}
					uni.setNavigationBarTitle({
						title: this.title
					})
				});
			},
			checkPlink(url) {
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				let curl = base64.encode(url)
				this.$request({
					url: this.$api.entity.pagelink,
					data: {
						pageurl: curl
					}
				}).then(res => {
					this.live_src = res.data.share_img
					// share_img   anchor_img
				})
			},
			requestCats(cat_id) {
				let url = this.$api.default.cat_list
				if (this.mall_id > 1) {
					url = mallurl + this.$apiUrl.default.cat_list
				}
				this.$request({
					url: url,
					data: {
						cat_id: cat_id,
						limit: 4
					},
				}).then(res => {
					if (res.code === 0) {
						// this.nav_list = this.nav_list.concat(res.data.list);
						this.cat_list = res.data.list
						// console.log(this.cat_list.length);
						if (this.cat_list.length == 0) {
							this.request()
						}
					}
				});
			},
			async request() {
				let url = this.$api.default.goods_list
				if (this.mall_id == 1) {
					url = this.$api.default.goods_list
				} else {
					url = mallurl + this.$apiUrl.default.goods_list
				}
				const res = await this.$request({
					url: url,
					method: 'get',
					data: {
						page: this.page,
						cat_id: this.cat_id,
						sort: 1,
						sort_type: 1,
						keyword: '',
						sign: '',
						is_sales: 1
					}
				});
				if (res.code === 0) {
					// console.log(res);
					this.page_count = res.data.pagination.page_count;
					this.goods_list = this.goods_list.concat(res.data.list)
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			allReq(pid) {
				let pdata = {
					pid: pid,
					status: 1,
					limit: 2
				}
				this.$request({
					url: this.$api.navs.list,
					data: pdata
				}).then((res) => {
					if (res.code == 0) {
						this.twoquery = res.data.list
					}
				}).catch(() => {

				})
			},
			routeGo(e, cat_id) {
				let url = e.page_url + '&title=' + e.name + '&cat_id=' + cat_id
				if (this.cat_list.length == 0) {
					url = e.page_url + '&title=' + e.name + '&cat_id=' + this.cat_id
				}
				uni.navigateTo({
					url: url
				});
			},
			morelist(id, name, index) {
				let url = '/plugins/diamonds/index?cat_id=' + id + '&title=' + name + '&numid=' + index + '&mall_id=' +
					this.mall_id
				if (this.available) {
					url = url + '&available=true'
				}
				uni.navigateTo({
					url: url
				})
			},
			jump(item) {
				let url = item
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (item.indexOf('/pages/gospeed/index') != -1 || item == '/pages/index/index' || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: url
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gold-video {
		width: 100%;
		// height: 450rpx;

		.image {
			width: 100%;
			// height: 586rpx;
			// height: 450rpx;
		}

		.video {
			width: 100%;
			height: 450rpx;
		}
	}

	/* 查询 */
	.beseparate {
		width: 720rpx;
		margin: 24rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.besepone {
		position: relative;
		// padding: 24rpx 24rpx 32rpx 36rpx;
		width: 350rpx;
		height: 490rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.image {
			width: 350rpx;
			height: 490rpx;
		}
	}

	.cate-style {
		margin: 36rpx auto;

		.cate-style-item {
			width: 250rpx;
			text-align: center;

			.cate-image {
				width: 180rpx;
				height: 180rpx;
			}

			.cate-name {
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
			}
		}
	}

	.cate-title {
		// text-align: center;
		font-size: 32rpx;
		// margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
		font-weight: 600;
	}

	.cate-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: #f4f4f4;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-title text {
		padding: 0 10px;
		position: relative;
	}

	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		// display: inline-flex;
		// width: 375rpx;
		// flex-direction: row-reverse;

		.list-one-item {
			width: 350rpx;
			height: 460rpx;
			font-size: 28rpx;
			margin: 0 auto;

			.image {
				width: 350rpx;
				height: 350rpx;
			}
		}
	}

	.list-two {
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 720rpx;
			height: 240rpx;
			font-size: 28rpx;

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				flex: 1;
				margin-left: 36rpx;
				text-align: justify;
			}
		}
	}

	.list-three {
		width: 720rpx;
		margin: 0 auto;
	}

	.list-three-item {
		// width: 720rpx;
		margin: 0 auto;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		display: inline-flex;
		width: 360rpx;
		flex-direction: row-reverse;

		.list-one-item {
			width: 350rpx;
			height: 460rpx;
			font-size: 28rpx;
			margin: 0 auto;

			.image {
				width: 350rpx;
				height: 350rpx;
			}
		}

		.beseparate {
			width: 720rpx;
			// margin: 24rpx auto;
			// display: inline-flex;
			// justify-content: space-between;
		}

		.besebutton {
			width: 360rpx;
			// height: 490rpx;
			margin: 0 auto;
		}

		.besepone {
			// position: relative;
			// padding: 24rpx 24rpx 32rpx 36rpx;
			width: 360rpx;
			height: 490rpx;
			background: transparent;
			border-radius: 16rpx;
			// overflow: hidden;
			margin: 0 auto;

			.image {
				width: 350rpx;
				height: 490rpx;
				margin: 0 auto;
			}
		}
	}

	.nowmoew {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
</style>
